<script setup>
const props = defineProps({
	list: {
		type: Array,
		required: true
	},
	type_key: {
		type: String,
		default: ''
	},
	collect: {
		type: Boolean,
		default: false
	}
})

// 点击跳转详情页
const onClickItem = (item) => {
	uni.navigateTo({
		url: `/ComprehensivePackage/Detail/Detail?detail_id=${item.id}&type=${props.collect ? item.type : props.type_key}`
	})
}
</script>

<template>
	<view class="list-item" v-for="item in list" :key="item.id" @tap="onClickItem(item)">
		<view class="list-item-left">
			<up-lazy-load :image="item.image" img-mode="aspectFill" height="130" border-radius="15"></up-lazy-load>
		</view>

		<view class="list-item-right">
			<view class="name ellipsis">
				{{ item.name }}
			</view>

			<view class="rate">
				<up-tag v-if="item.grade" :text="item.grade" type="success" shape="circle"></up-tag>
				<up-tag :text="item.rating" shape="circle"></up-tag>
			</view>

			<view class="info">
				<view class="info-local">
					<up-icon name="map-fill"></up-icon>
					{{ item.city_name }}
				</view>
				<view class="info-type">
					{{ collect ? item.association_type : item.type }}
				</view>
			</view>

			<view v-if="item.description" class="description ellipsis">
				{{ item.description }}
			</view>

			<view class="price">
				<view v-if="item.price !== '0.00'" class="money">￥</view>
				<view class="number">
					{{ Math.floor(item.price) === 0 ? '免费' : Math.floor(item.price) }}
				</view>
				<view v-if="item.price !== '0.00'" class="end">起</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
.list-item {
	width: 100%;
	height: 300rpx;
	border-bottom: 2rpx solid #f5f5f5;
	display: flex;
	padding: 20rpx;
	background-color: #fff;

	.list-item-left {
		width: 35%;
		margin-right: 20rpx;
	}

	.list-item-right {
		width: 60%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		.name {
			font-size: 35rpx;
			font-weight: bold;
		}

		.info {
			display: flex;
			justify-content: space-between;
			color: #919499;
			font-size: 30rpx;

			.info-local {
				display: flex;
			}
		}

		.rate {
			display: flex;
			width: auto;
			height: 80rpx;
			justify-content: space-between;
			align-items: center;
		}

		.description {
			font-size: 28rpx;
			color: #919499;
		}

		.price {
			display: flex;
			justify-content: flex-end;
			align-items: baseline;

			.money {
				color: #fb4223;
				font-size: 30rpx;
			}

			.number {
				font-size: 35rpx;
				font-weight: bold;
				color: #fb4223;
			}

			.end {
				font-size: 25rpx;
				color: #919499;
			}
		}
	}
}
</style>